<html>
<head>
<meta charset="UTF-8">
<style>
body{width:100%;height:100%;background-color:#000;margin:0;padding:0}
canvas{position:fixed;left:0;top:0;width:100%;height:100%;}
.text{position:fixed;left:0;top:0;width:100%;padding-top:20%;font-size:600%;color:#ff0505;text-align:center;text-shadow:2px 2px 5px #000, 0 0 15px #fff}
#canvas1{
background: #000777; /* Old browsers */
background: -moz-linear-gradient(top, #000777 7%, #916228 68%, #9b2b2b 85%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(7%,#000777), color-stop(68%,#916228), color-stop(85%,#9b2b2b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #000777 7%,#916228 68%,#9b2b2b 85%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #000777 7%,#916228 68%,#9b2b2b 85%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #000777 7%,#916228 68%,#9b2b2b 85%); /* IE10+ */
background: linear-gradient(to bottom, #000777 7%,#916228 68%,#9b2b2b 85%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000777', endColorstr='#9b2b2b',GradientType=0 ); /* IE6-9 */
}
</style>
</head>
<body>
<canvas id="canvas1"></canvas>
<div class="text">Panic!!<br/>!!MESSAGE</div>
</body>
<script>
stars=function(){function e(e,t,n){this.x=t;this.y=n;this.size=e;this.frame=0;this.explosion=null}function n(e,n){this.x=e;this.y=n;this.sparks=[];this.frame=0;for(t=0;t<20;t++){spark=new r(this.x,this.y);this.sparks.push(spark)}}function r(e,t){this.base=t;this.x1=e;this.y1=t;this.x2=e;this.y2=t;this.x_speed=s(-10,10)*100;this.y_speed=s(-10,-5)*100}function i(e){this.id=e;this.pause=s(1,100)*100;this.distance=0}function s(e,t){return Math.floor(Math.random()*(t-e)+e)/100}function o(e){e.setAttribute("width",total_width);e.setAttribute("height",total_height);e.getContext("2d").width=total_width;e.getContext("2d").height=total_height;return e.getContext("2d")}function u(){total_width=document.body.clientWidth;total_height=document.body.clientHeight;boundary_bottom=total_height*.75;boundary_left=0;canvas=o(document.getElementById("canvas1"));bg_img=new Image;bg_img.src=p();for(t=0;t<NUMBER_ORBS;t++){cur=new i(t);stars_a.push(cur)}a()}function a(){l();star_val=setInterval(function(){f()},SPEED*5)}function f(){canvas.clearRect(0,0,total_width,total_height);for(h=0;h<NUMBER_ORBS;h++){if(stars_a[h].distance<DISTANCE_TO_FRONT)stars_a[h].animate()}canvas.drawImage(bg_img,0,0,total_width,total_height);for(h=0;h<NUMBER_ORBS;h++){if(stars_a[h].distance>=DISTANCE_TO_FRONT)stars_a[h].animate()}}function l(){window.clearInterval(star_val)}function c(e){e=e||window.event;if(e.keyCode===32)l()}function p(){return""}star_val=null;stars_a=new Array;NUMBER_ORBS=75;NUMBER_TRAILS=45;SPEED=6;total_width=0;total_height=0;colors=["#ffff00","#ffc601","#ff7801","#c36c07"];canvas=null;background=null;GRAVITY=.3;INERTIA=.1;DISTANCE_TO_FRONT=.45;e.prototype.animate=function(){if(this.frame>=NUMBER_TRAILS)return-1;backgroundColor=this.frame>3?"rgba(95, 95, 95, "+(1-this.frame/NUMBER_TRAILS)+")":colors[this.frame];width=this.frame>3?this.size:this.size*(.7+.2*(this.frame/3));canvas.beginPath();canvas.arc(this.x,this.y,width,0,Math.PI*2,true);canvas.closePath();canvas.fillStyle=backgroundColor;canvas.fill();this.frame+=1};n.prototype.animate=function(){this.frame++;console.log(this.frame);if(this.frame>35)return-1;canvas.beginPath();canvas.arc(this.x,this.y,5+this.frame*2,0,Math.PI,true);canvas.closePath();canvas.fillStyle="rgba(255, 163, 0, "+(35-this.frame)/35+")";canvas.fill();canvas.beginPath();for(t=this.sparks.length-1;t>=0;t--){spark=this.sparks[t];spark.x2=spark.x1;spark.y2=spark.y1;spark.x_speed+=spark.x_speed>0?INERTIA*-1:INERTIA;spark.y_speed+=GRAVITY;spark.x1+=spark.x_speed*.5;spark.y1+=spark.y_speed*.5;canvas.moveTo(spark.x1,spark.y1);canvas.lineTo(spark.x2,spark.y2)}canvas.lineWidth=3;canvas.strokeStyle="#FFFF00";canvas.stroke()};i.prototype.init=function(){this.generate()};i.prototype.generate=function(){this.trails=[];if(this.id<NUMBER_ORBS*.4)this.distance=s(5,15);else if(this.id<NUMBER_ORBS*.75)this.distance=s(10,25);else this.distance=s(18,65);this.x=total_width*s(1,130);this.y=total_height*.2*(.6-this.distance);speed=3*this.distance*4;this.speed={x:speed*s(80,160),y:speed};this.size=Math.floor(18*this.distance);this.explosion=null;this.trails.push(new e(this.size,this.x,this.y))};i.prototype.animate=function(){if(this.pause>0){this.pause--;if(this.pause<1)this.init()}else{if(this.x>boundary_left&&this.y<boundary_bottom){trail=new e(this.size,this.x,this.y);this.trails.push(trail);this.x-=this.speed.x;this.y+=this.speed.y}if(this.distance>=DISTANCE_TO_FRONT&&this.y>boundary_bottom&&this.x>boundary_left&&this.explosion!=="finished"){if(this.explosion===null)this.explosion=new n(this.x,this.y+6);if(this.explosion.animate()===-1)this.explosion="finished"}if(this.trails.length>0){for(t=this.trails.length-1;t>=0;t--){res=this.trails[t].animate();if(res===-1)this.trails.splice(t,1)}}if(this.trails.length===0&&(this.explosion===null||this.explosion==="finished")){this.pause=s(1,20)*100}}};window.onload=function(){u();a()};document.onkeydown=c}()
</script>
</html>

